<template>
    <div class="teeth">
         <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title">蛀牙</span>
        <span slot="more"></span>
        </LoginHeader>
        <p>设置蛀牙情况</p>
        <span>上颌</span>
        <div class="teethpic">
            <span>左脸颊</span>
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="lefttop" @click="changelt">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" v-else  @click="changelt">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="righttop" @click="changert">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" v-else  @click="changert">
            <span>右脸颊</span>
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="leftbot" @click="changelb">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" v-else @click="changelb">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="rightbot" @click="changerb">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" v-else @click="changerb">
        </div>
        <span>下颌</span>
         <!-- <span>上颌</span>
        <div class="teethpic">
            <span>左脸颊</span>
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="lefttop" @click="changelt">
            <div v-else  @click="changelt">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" >
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_selected_1.png" alt="" >
            </div>
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="righttop" @click="changert">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" v-else  @click="changert">
            <span>右脸颊</span>
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="leftbot" @click="changelb">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" v-else @click="changelb">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_normal.png" alt="" v-if="rightbot" @click="changerb">
            <img src="@/assets/njrpic/usercenterpic/teeth/pic_tooth_topleft_active.png" alt="" v-else @click="changerb">
        </div>
        <span>下颌</span> -->
        <br>
        <el-button v-show="choose" @click="ifteeth">确定</el-button>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
           lefttop:true,
           righttop:true,
           leftbot:true,
           rightbot:true,
           choose:''
        }
    },
 components:{
        LoginHeader
    },
    watch:{
        lefttop:function(){
            if(!this.lefttop||!this.righttop||!this.leftbot||!this.rightbot){
                this.choose=true
            }else{
                this.choose=false
            }
        },
        righttop:function(){
            if(!this.lefttop||!this.righttop||!this.leftbot||!this.rightbot){
                this.choose=true
            }else{
                this.choose=false
            }
        },
        leftbot:function(){
            if(!this.lefttop||!this.righttop||!this.leftbot||!this.rightbot){
                this.choose=true
            }else{
                this.choose=false
            }
        },
        rightbot:function(){
            if(!this.lefttop||!this.righttop||!this.leftbot||!this.rightbot){
                this.choose=true
            }else{
                this.choose=false
            }
        }
    },
    methods:{
        goback(){
            this.$router.go(-1)
        },
        changelt(){
            this.lefttop=!this.lefttop
        },
        changert(){
            this.righttop=!this.righttop
        },
        changelb(){
            this.leftbot=!this.leftbot
        },
        changerb(){
            this.rightbot=!this.rightbot
        },
        // 提交是否蛀牙
        ifteeth(){
            this.$http.put('/api/users/'+this.$store.state.id,{teeth:1})
            .then(({
                data,config
            })=>{
                if(data.code==200){
                    console.log(data);
                    this.$message.success('修改蛀牙信息成功')
                    this.$router.push('/usercenter/userinfo')
                }else{
                    this.$message.error('修改蛀牙失败')
                }
            })
        },
        toyesteeth(){
            this.$router.push('/usercenter/edityesteeth')
        }
    }
}
</script>
<style lang="less" scoped>
.teeth{
    text-align: center;
    p{
        margin: 100px 0;
        color: #d6d6d6;
    }
    p+span{
        color: #b899fb;
    }
    div+span{
        color: #b899fb;
    }
    .teethpic{
        img{
            width: 30%;
        }
         img:nth-of-type(2){
            transform:scaleX(-1);
        }
        img:nth-of-type(3){
            transform:scaleY(-1);
        }
        img:nth-of-type(4){
            transform: rotate(180deg);
        }
        span{
        color: #b899fb;
    }
    }
    .el-button{
        width: 50%;
        border-radius: 30px;
        background-color: #7f50d5;
        padding: 15px 0;
        color: white;
        margin-top: 50px;
    }
}
</style>